<template>
  <div class="shoppingMall">
    <div class="seach">
      <img :src="locationIcon" width="100px">
      <!-- 商品分类导航 -->
      <div class="fruite-nav" @click="goCategoryList">
        <div v-for="img in fruiteNav" :key="img.image">
          <img v-lazy="img.image" width="30px" :onerror="errorImg"/>
          <span class="fruite-des">{{ img.mallCategoryName }}</span>
        </div>
      </div>
      <!-- 搜索框 -->
      <div class="input" @keyup.enter="search()">
        <el-col :span="18">
          <el-autocomplete
            class="inline-input"
            v-model="keyWord"
            :fetch-suggestions="querySearch"
            placeholder="请输入搜索词"
            @select="handleSelect"
          ></el-autocomplete>
        </el-col>
        <div class="seach-img">
          <img :src="searchIcon" width="20px" @click="search()">
        </div>
      </div>
    </div>
    
    <!-- swiper area -->
    <div class="swiper-fa">
      <div class="swiper-area">
        <swiper :options="swiperOption2">
          <swiper-slide  v-for="(img,index) in bannerPicArray" :key="index">
            <img :src="img.IMAGE1" @click="goDetail(img.ID)" width="390px" height="220px" :onerror="errorImg"/>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <!-- 商品推荐 -->
      <div class="recommend-area">
        <div class="recommend-title">商品推荐</div>
        <div class="recommend-body">
          <swiper :options="swiperOption">
            <swiper-slide v-for="(item, index) in recommendGoods" :key="index">
              <div class="recommend-item" @click="goDetail(item.ID)">
                <img :src="item.IMAGE1" width="70%" :onerror="errorImg"/>
                <div class="goodsName">{{ item.NAME }}</div>
                <div class="price-control">
                  <span class="mallPrice"
                    >原价：{{ item.ORI_PRICE | toMoney }}</span
                  ><br />
                  <span class="price">现价：{{ item.PRESENT_PRICE | toMoney }}</span>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
    
    <!-- 广告 -->
    <div class="ad">
      <img v-lazy="adImg.PICTURE_ADDRESS" width="100%"/>
    </div>
    <!-- 楼层不规则层 -->
    <div class="floor">
      <div>
        <floor-component
        :floorData="floor1"
        :floorName="floorName.floor1"
      ></floor-component>
      </div>
      <div>
        <floor-component
        :floorData="floor2"
        :floorName="floorName.floor2"
      ></floor-component>
      </div>
      <div>
        <floor-component
        :floorData="floor3"
        :floorName="floorName.floor3"
      ></floor-component>
      </div>
    </div>
    <!-- 热卖商品 -->
    <div class="hotGoods-title">热卖商品</div>
    <div class="hotGoods">
      <div v-for="(item, index) in hotGoods" :key="index">
        <goods-component :goods="item"></goods-component>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/axiosBlock";
import "swiper/dist/css/swiper.css";
import floorComponent from "../common/floor";
import goodsComponent from "../common/goods";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import { toMoney } from "@/assets/js/filter";
import url from "@/serviceAPI.config.js";
import { Toast } from "vant";
export default {
  name: "shoppingMall",
  data() {
    return {
      errorImg: 'this.src="' + require('@/assets/image/errorimg.png') + '"',
      keyWord: '',
      localsearchword: [],
      locationIcon: require("../../assets/image/life.png"),
      searchIcon: require("@/assets/image/search.png"),
      bannerPicArray: [], // 轮播图
      fruiteNav: [], // 水果导航
      adImg: "", // 广告图
      recommendGoods: [], // 商品推荐数据
      floor1: [],
      floor2: [],
      floor3: [],
      floorName: {},
      hotGoods: [],
      swiperOption: {
        slidesPerView: 5,
      },
      swiperOption2: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: {
          delay: 1000,
          disableOnInteraction: false,
          // disableOnInteraction: false,
          stopOnLastSlide: false,
        },
      }
    };
  },
  components: {
    swiper,
    swiperSlide,
    floorComponent,
    goodsComponent
  },
  created() {
    // 获取首页数据
    axios({
      url: url.getShoppingMallInfo,
      method: "get"
    })
      .then(res => {
        if (res.status === 200) {
          let data = res.data.data;
          console.log(data);
          this.bannerPicArray = data.slides;
          this.fruiteNav = data.category;
          this.adImg = data.advertesPicture;
          this.recommendGoods = data.recommend;
          this.floorName = data.floorName;
          this.floor1 = data.floor1;
          this.floor2 = data.floor2;
          this.floor3 = data.floor3;
          this.hotGoods = data.hotGoods;
        }
      })
      .catch(error => {
        console.log(error);
      });
    // 读取本地搜索记录
    this.localsearchword = localStorage.historyWord
        ? JSON.parse(localStorage.historyWord)
        : [];
    // 验证登录状态
    axios({
      url:url.correct,
      method: 'get'
    }).then(res => {
      if(res.code == 200){
        this.$message.success("您的登录状态依然有效");
      }
    })
  },
  methods: {
    handleSelect(item) {
        console.log(item);
      },
    querySearch(queryString, cb) {
      
      var results = [];
      this.localsearchword.map(item =>{
        results.push({
          "value": item
        })
      });
         var results = queryString ? results.filter(this.createFilter(queryString)) : results;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString) === 0);
        };
      },
    search() {
      if (!this.keyWord) {
        Toast("请输入关键字！！");
        return;
      }
      // 提交搜索词
      axios({
        url: url.postkeyword,
        method: 'post',
        data:{
          keyword: this.keyWord
        }
      }).then(res =>{
        if(res.data.code == 200){
          console.log('关键词提交成功');
        }
      })
      // 存到 vuex 数据仓库中 留给搜索页使用
      this.$store.commit("changeKeyWord", this.keyWord);
      let localHave = false;
      // 读取本地存储的搜索历史记录
      let history = localStorage.historyWord
        ? JSON.parse(localStorage.historyWord)
        : [];
      history.map(i =>{
        // 如果本地已经有这个搜索词
        if(i == this.keyWord){
          localHave = true;
        }
      });
      // 如果没有的话就添加
      if(!localHave){
        history.unshift(this.keyWord);
        // 最多存储 22 个搜索记录
        if (history.length > 22) {
          history.splice(21, history.length - 22);
        }
        localStorage.historyWord = JSON.stringify(history);
      }
      this.$router.push({
        name: "search",
        query: { keyWord: this.keyWord }
      });
    },
    // 跳转到搜索页
    goSearchPage() {
      this.$router.push({ name: "searchWord" });
    },
    // 跳转到商品分类页
    goCategoryList() {
      this.$router.push({ name: "categoryList" });
    },
    // 跳转到商品详细页
    goDetail(goodsId) {
      console.log(goodsId);
      console.log("这是id");
      this.$router.push({ name: "DetailGoodsInfo", query: { goodsId } });
    }
  },
  filters: {
    // 商品价格过滤器 保留两位小数
    toMoney(money) {
      return toMoney(money);
    }
  }
};
</script>

<style scoped>
.shoppingMall {
  width: 1226px;
  margin: 0 auto;
  padding-bottom: 50px;
}
.seach {
  width: 1226px;
  margin: 0 auto 20px;
  position: relative;
}
.input {
  height: 49px;
  position: absolute;
  right: 0;
  top: 0;
}
.seach-input {
  line-height: 48px;
  font-size: 16px;
  padding: 0 10px;
  border: 1px solid #ccc;
  padding-right: 52px;
}
.seach-img {
  /* display: inline-block; */
  position: absolute;
  top: -2px;
  right: 42px;
  /* border: 1px solid #ccc; */
  height: 40px;
  width: 52px;
  padding-top: 13px;
  padding-left: 13px;
  box-sizing: border-box;
}
.search-row {
  overflow: hidden;
  background-color: #e5017d;
  height: 2.2rem;
  line-height: 2.2rem;
}
.search-icon {
  padding-top: 0.5rem;
  padding-left: 0.6rem;
}
.search-button {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.swiper-fa {
  width: 100%;
}
.swiper-area {
  width: 400px;
  display: inline-block;
  /* overflow: hidden; */
  /* max-height: 13rem; */
  /* height: 300px; */
  margin-bottom: 50px;
}
.fruite-nav {
  /* display: flex;
  margin: 0 0.2rem 0.2rem 0.2rem;
  border-radius: 0.3rem;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #fff; */
  display: inline-block;
  width: 500px;
  margin-left: 30px;
}
.fruite-nav div {
  display: inline-block;
  margin-right: 10px;
  /* flex: 1;
  padding: 0.5rem;
  font-size: 0.2rem;
  text-align: center; */
}
.fruite-nav .fruite-des {
  display: inline-block;
  margin-top: 0.2rem;
}
.recommend-area {
  display: inline-block;
  width: 500px;
  background-color: #fff;
  margin-left: 322px;
  /* border: 1px solid #ccc; */
  /* height: 13rem; */
}
.recommend-title {
  /* height: 1rem; */
  line-height: 0.6rem;
  padding-left: 0.2rem;
  font-size: 0.4rem;
  color: #e5017d;
  border-bottom: 1px solid #ccc;
}
.recommend-body {
  text-align: center;
  font-size: 0.3rem;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.recommend-item {
  border-right: 1px solid #ccc;
  height: 4rem;
}
.price-control {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.mallPrice {
  text-decoration: line-through;
}
.floor {
  width: 1226px;
  display: flex;
}
.hotGoods-title {
  color: #e5017d;
  font-size: 0.5rem;
  padding: 0.3rem 0;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}
.hotGoods {
  display: flex;
  flex-wrap: wrap;
  padding-left: 130px;
}
</style>
